@extends('wx.layout.cslnbj')

@section('wx.pbody')

<form class="form-horizontal" id="wx-clase" autocomplete="off" enctype="multipart/form-data">
  <div class="weui-form">

    <div class="weui-form__text-area">
      <h2 class="weui-form__title">长沙市老年保健协会<br />“健康养老之我见”有奖征文</h2>
      <div class="weui-form__desc" style="text-align:left;">
      <p><b>征文时间：</b>2021年5月15日至7月31日</p>
      <p><b>人员要求：</b>六十岁以上（1961年12月31日前出生）</p>
      <p><b>征文内容：</b>保持阳光心态，践行健康生活方式，科学养生，健康养老等方面的经验、体会</p>
      <p><b>征文要求：</b>字数在千字以内，观点鲜明，符合科学，文笔流畅，通俗易懂。限散文形式。</p>
    </div>
    </div>
    <div class="weui-form__control-area">
      {{ csrf_field() }}

      <div class="weui-cells__group weui-cells__group_form">
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="name" placeholder="投稿人姓名">
            </div>
          </div>
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">手机</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="mobile" placeholder="投稿人手机号码" type="number">
            </div>
          </div>
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">身份证</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="idcard" placeholder="投稿人身份证号码">
            </div>
          </div>
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">稿件</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="files" id="file" type="file">
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="weui-form__opr-area">
      <button class="weui-btn weui-btn_primary" id="btnDeploy">投 稿</button>
    </div>

  </div>
</form>
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="//res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
  <script type="text/javascript">


  $(function () {

      var _fileInput=document.getElementById("file");
      _fileInput.addEventListener("change",function(){

        if (_fileInput.files.length === 0) {
            layer.msg("请选择文件");
            return;
        }
        var oFile = _fileInput.files[0];
        var reg = /\.(docx|doc)$/;

        if(!reg.test(oFile.name)){
            layer.msg("文件类型必须是Word");
            return false;
        }
      },false);

      $("#wx-clase").validate({
          onfocusout: false,
          onkeyup: false,
          rules: {
              name: {required: true, isChinese: true},
              mobile: {required: true, isMobile: true},
              idcard: {required: true, isIdCardNo: true},
              files: {required: true},
          },
          messages: {
              name: {required: "请填写投稿人姓名"},
              mobile: {required: "请填写投稿人联系电话"},
              idcard: {required: "请填写投稿人身份证号码", isIdCardNo: "身份证号码不正确"},
              files: {required: "请上传稿件，格式为Word"},
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.msg(v.message, {shift: -1, time: 2000});
                  return false;
              });
          },

          submitHandler: function (form) {

              var formData = new FormData();
              formData.append('_token', $("input[name='_token']").attr('value') );
              formData.append('name', $("input[name='name']").val() );
              formData.append('mobile', $("input[name='mobile']").val() );
              formData.append('idcard', $("input[name='idcard']").val() );
              formData.append('files', document.getElementById('file').files[0] );

              $.ajax({
                type: "post",
                dataType: 'json',
                url: "{{route('wx.settle.recruit')}}",
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                  console.log(data)
                  layer.msg(data.message, {time: 1500,shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                         $(window).attr('location', data.url);
                      }
                  });
                },
                error: function (data) {
                    layer.msg(data.responseJSON.message);
                }
              });

          }

      });

  });
  </script>
@stop